<template>
  	<view class="container">
  		<view class="title">业绩总计</view>
  		<view class="achieve">
  			<view class="order bg-abstract">
  				<view class="label">
  					<u-icon  name="order" color="#ffffff"></u-icon>总订单数
  				</view>
  				<view class="count">{{total.ordercount}}</view>
  			</view>
  			<view class="sale bg-abstract">
  				<view class="label">
  					<u-icon  name="shopping-cart" color="#ffffff"></u-icon>总销售额
  				</view>
  				<view class="money">{{total.amount}}</view>
  			</view>
  			<view class="profit bg-abstract">
  				<view class="label">
  					<u-icon  name="account" color="#ffffff"></u-icon>总客户量
  				</view>
  				<view class="count">{{total.busidcount}}</view>
  			</view>
  		</view>
  		<view class="title">客户分析</view>
  		<view class="charts-box">
  			<qiun-data-charts type="column" :opts="Businessopts" :chartData="BusinesschartData" />
  		</view>
  		<view class="title">回访分析</view>
  		<view class="charts-box">
  			<qiun-data-charts type="line" :opts="Visitopts" :chartData="VisitchartData" />
  		</view>
  		<view class="title">领取分析</view>
  		<view class="charts-box">
  			<qiun-data-charts type="line" :opts="Receiveopts" :chartData="ReceivechartData" />
  		</view>
  		<view class="title">订单分析</view>
  		<view class="charts-box">
  			<qiun-data-charts type="mount" :opts="Orderopts" :chartData="OrderchartData" />
  		</view>
  		<view class="title">来源分析</view>
  		<view class="charts-box">
  			<qiun-data-charts type="pie" :opts="Sourceopts" :chartData="SourcechartData" />
  		</view>
  	</view>
</template>

<script>
export default {
  	data() {
  			return {
  				BusinesschartData: {},
  				Businessopts: {
  					color: ["#EE6666", "#ea7ccc"],
  					padding: [15, 15, 0, 5],
  					enableScroll: false,
  					legend: {},
  					xAxis: {
  						disableGrid: true
  					},
  					yAxis: {
  						data: [{
  							min: 0
  						}]
  					},
  					extra: {
  						column: {
  							type: "group",
  							width: 30,
  							activeBgColor: "#000000",
  							activeBgOpacity: 0.08
  						}
  					}
  				},
  				Visitopts: {
  					color: ["#ea7ccc", "#FAC858", "#EE6666", "#FC8452", "#9A60B4",
  
  					],
  					padding: [15, 10, 0, 15],
  					enableScroll: false,
  					legend: {},
  					xAxis: {
  						disableGrid: true
  					},
  					yAxis: {
  						gridType: "dash",
  						dashLength: 2
  					},
  					extra: {
  						line: {
  							type: "straight",
  							width: 2,
  							activeType: "hollow"
  						}
  					}
  				},
  				VisitchartData: {},
  				Receiveopts: {
  					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
  						"#ea7ccc"
  					],
  					padding: [15, 10, 0, 15],
  					enableScroll: false,
  					legend: {},
  					xAxis: {
  						disableGrid: true
  					},
  					yAxis: {
  						gridType: "dash",
  						dashLength: 2
  					},
  					extra: {
  						line: {
  							type: "straight",
  							width: 2,
  							activeType: "hollow"
  						}
  					}
  				},
  				ReceivechartData: {},
  				Orderopts: {
  					color: ["#FAC858", "#EE6666", "#FC8452", "#9A60B4", "#ea7ccc"],
  					padding: [15, 15, 0, 5],
  					enableScroll: false,
  					legend: {},
  					xAxis: {
  						disableGrid: true
  					},
  					yAxis: {
  						data: [{
  							min: 0
  						}]
  					},
  					extra: {
  						mount: {
  							type: "mount",
  							widthRatio: 1.5
  						}
  					}
  				},
  				OrderchartData: {},
  				Sourceopts: {
  					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
  						"#ea7ccc"
  					],
  					padding: [5, 5, 5, 5],
  					enableScroll: false,
  					extra: {
  						pie: {
  							activeOpacity: 0.5,
  							activeRadius: 10,
  							offsetAngle: 0,
  							labelWidth: 15,
  							border: false,
  							borderWidth: 3,
  							borderColor: "#FFFFFF"
  						}
  					}
  				},
  				SourcechartData: {},
  				total: {},
  				month: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  			};
  		},
  		onReady() {
  			this.geBusinessData();
  			this.geVisitData();
  			this.getReceiveData();
  			this.getOrderData();
  			this.getSourceData();
  			this.getTotalData();
  		},
  		methods: {
  			async getTotalData() {
  				let result = await this.$u.api.admin.total()
  				if (result.code == 1) {
  					this.total = result.data
  				}
  			},
  			async geBusinessData() {
  				let result = await this.$u.api.admin.dashboardBusiness()
  				let res = {
  					categories: this.month,
  					series: [{
  							name: "未认证",
  							data: result.data.nocertified
  						},
  						{
  							name: "已认证",
  							data: result.data.certified
  						}
  					]
  				};
  				this.BusinesschartData = JSON.parse(JSON.stringify(res));
  
  			},
  			async geVisitData() {
  				let result = await this.$u.api.admin.dashboardVisit()
  				let res = {
  					categories: this.month,
  					series: [{
  						name: "回访量",
  						data: result.data
  					}]
  				};
  				this.VisitchartData = JSON.parse(JSON.stringify(res));
  
  			},
  			async getReceiveData() {
  				let result = await this.$u.api.admin.dashboardReceive()
  				let res = {
  					categories: this.month,
  					series: [{
  							name: "申请",
  							data: result.data.apply
  						},
  						{
  							name: "分配",
  							data: result.data.allot
  						},
  						{
  							name: "回收",
  							data: result.data.recovery
  						}
  					]
  				};
  				this.ReceivechartData = JSON.parse(JSON.stringify(res));
  
  			},
  			async getOrderData() {
  				let result = await this.$u.api.admin.dashboardOrder()
  				let res = {
  					series: [{
  						data: result.data
  					}]
  				};
  				this.OrderchartData = JSON.parse(JSON.stringify(res));
  			},
  			async getSourceData() {
  				let result = await this.$u.api.admin.dashboardSource()
  				let res = {
  					series: [{
  						data: result.data
  					}]
  				};
  				this.SourcechartData = JSON.parse(JSON.stringify(res));
  			}
  		}
  	};
</script>

<style scoped>
  .container {
  		padding: 8px;
  	}
  
  	.title {
  		font-weight: bold;
  		font-size: 15px;
  		padding: 15px 0px;
  	}
  
  	.container-tabs {
  		padding: 8px;
  		background-color: whitesmoke;
  	}
  
  	.tabs {
  		padding: 0 8px;
  		background-color: #fff;
  		border-radius: 12px;
  	}
  
  	.tabs scroll-view {
  		border-radius: 12px;
  	}
  
  	.tab-content {
  		padding: 16px 0;
  		display: flex;
  		justify-content: center;
  		align-items: center;
  	}
  
  	.tab-item {
  		display: flex;
  		flex: 1;
  		flex-direction: column;
  		align-items: center;
  	}
  
  	.tab-item .value {
  		font-weight: bold;
  		font-size: 20px;
  	}
  
  	.tab-item .label {
  		background-color: whitesmoke;
  		color: #333;
  		padding: 4px 12px;
  		margin: 4px 0;
  		border-radius: 4px;
  		font-size: 11px;
  		overflow: hidden;
  		white-space: nowrap;
  		text-overflow: ellipsis;
  
  	}
  
  	.tab-item .sublabel {
  		display: flex;
  		align-items: center;
  		font-size: 12px;
  		color: #aaa;
  	}
  
  	.tab-item .subvalue {
  		font-size: 12px;
  	}
  
  	.tab-chart {
  		padding: 16px;
  		position: relative;
  	}
  
  	ec-canvas {
  		width: 100%;
  		height: 100%;
  	}
  
  	.ec-order {
  		width: 100%;
  		padding: 0 0 6px 0;
  		height: 200px;
  		display: flex;
  		flex-direction: column;
  		align-items: center;
  		justify-content: space-between;
  		box-sizing: border-box;
  		position: relative;
  	}
  
  	.ec-order-title {
  		font-weight: bold;
  		font-size: 18px;
  		position: absolute;
  		top: 0;
  		left: 0;
  	}
  
  	.tab-chart-user,
  	.tab-chart-article,
  	.tab-chart-comment {
  		width: 100%;
  		height: 200px;
  	}
  
  	.ec-title {
  		padding: 16px 0 0 16px;
  		font-weight: bold;
  		font-size: 16px;
  	}
  
  	.achieve {
  		height: 100px;
  		display: flex;
  		justify-content: space-between;
  		align-items: center;
  		color: #fff;
  	}
  
  	.achieve .order,
  	.achieve .sale,
  	.achieve .profit {
  		position: relative;
  		height: 100%;
  		border-radius: 4px;
  		width: 32%;
  	}
  
  	.achieve .order {
  		background-color: #3c9cff;
  	}
  
  	.achieve .sale {
  		background-color: #19be6b;
  	}
  
  	.achieve .profit {
  		background-color: #909399;
  	}
  
  	.achieve .count {
  		font-size: 22px;
  		font-weight: bold;
  		position: absolute;
  		right: 10px;
  		bottom: 10px;
  	}
  
  	.achieve .money {
  		font-size: 22px;
  		font-weight: bold;
  		position: absolute;
  		right: 10px;
  		bottom: 10px;
  	}
  
  	.money::before {
  		content: "¥";
  		margin-right: 2px;
  		font-weight: normal;
  		font-size: 14px;
  	}
  
  	.achieve .label {
  		font-size: 14px;
  		position: absolute;
  		top: 10px;
  		left: 10px;
  		text-align: center;
  		width: 100%;
  		display: flex;
  		align-items: center;
  		justify-content: start;
  	}
  
  	.achieve .label .icon {
  		margin-right: 4px;
  	}
</style>